68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Server, Lock, Key, Users, X, ArrowRight } from "lucide-react"; // Replace with actual imports
|
|
import { Card, CardContent } from "@app/components/ui/card";
|
|
import { Button } from "@app/components/ui/button";
|
|
|
|
export const ResourcesSplashCard = () => {
|
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
|
|
const key = "resources-splash-dismissed";
|
|
|
|
useEffect(() => {
|
|
const dismissed = localStorage.getItem(key);
|
|
if (dismissed === "true") {
|
|
setIsDismissed(true);
|
|
}
|
|
}, []);
|
|
|
|
const handleDismiss = () => {
|
|
setIsDismissed(true);
|
|
localStorage.setItem(key, "true");
|
|
};
|
|
|
|
if (isDismissed) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full mx-auto overflow-hidden mb-8 hidden md:block relative">
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="absolute top-2 right-2 p-2"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<CardContent className="grid gap-6 p-6">
|
|
<div className="space-y-4">
|
|
<h3 className="text-xl font-semibold flex items-center gap-2">
|
|
<Server className="text-blue-500" />
|
|
Resources
|
|
</h3>
|
|
<p className="text-sm">
|
|
Resources are proxies to applications running on your private network. Create a resource for any HTTP/HTTPS or raw TCP/UDP service on your private network.
|
|
Each resource must be connected to a site to enable private, secure connectivity through an encrypted WireGuard tunnel.
|
|
</p>
|
|
<ul className="text-sm text-muted-foreground space-y-2">
|
|
<li className="flex items-center gap-2">
|
|
<Lock className="text-green-500 w-4 h-4" />
|
|
Secure connectivity with WireGuard encryption
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Key className="text-yellow-500 w-4 h-4" />
|
|
Configure multiple authentication methods
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<Users className="text-purple-500 w-4 h-4" />
|
|
User and role-based access control
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ResourcesSplashCard;
|